"); } #playPause.playing::before { background-image: url("data:image/svg+xml;utf8,
"); } #mute::before { background-image: url("data:image/svg+xml;utf8,
"); } #mute.low::before { background-image: url("data:image/svg+xml;utf8,
"); } #mute.high::before { background-image: url("data:image/svg+xml;utf8,
"); } #mute.muted::before { background-image: url("data:image/svg+xml;utf8,
"); } #close::before { background-image: url("data:image/svg+xml;utf8,
"); } .volume-container { display: flex; align-items: center; gap: 6px; position: relative; height: 36px; } .volume-slider { width: 36px; height: 86px; background: rgba(255 255 255 / 0.2); border-radius: 10px; position: relative; cursor: pointer; display: flex; flex-direction: column-reverse; } .volume-level { background: #f1f1f1; border-radius: 10px 10px 0 0; width: 100%; transition: height 0.2s ease; } .thumb { position: absolute; width: 24px; height: 8px; border-radius: 5px; background: white; left: 6px; cursor: pointer; } .thumb:focus { outline: 2px solid #b9b9b9; }